<template>
  <div class="admin-dash">
    <el-container>
      <el-header class="dash-header">
        <h1><a href="">活动管理系统</a></h1>
        <div class="dash-header-right">
          <el-badge is-dot class="notice-item">
            <el-button size="small">通知</el-button>
          </el-badge>

          <el-dropdown @command="clickDropdown">
            <span class="el-dropdown-link">
              用户名<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="selfInfo">
                <router-link to="/me">个人信息</router-link>
              </el-dropdown-item>
              <el-dropdown-item command="forget">
                <router-link to="/changepassword">修改密码</router-link>
              </el-dropdown-item>
              <el-dropdown-item command="quit">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <SideBar />
        </el-aside>

        <el-container>
          <el-main>
            <router-view />
          </el-main>
          <el-footer style="line-height: 60px; background: #fff"
            >Footer</el-footer
          >
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import SideBar from "../components/SideBar.vue";

export default {
  name: "DashView",
  data() {
    return {};
  },
  components: {
    SideBar,
  },
  created() {},
  methods: {
    ...mapActions(["userStore/logoutAction"]),
    quitSysterm() {
      this.["userStore/logoutAction"]().then(() => {
        this.$router.push("/login");
      });
    },
    clickDropdown(key) {
      switch (key) {
        case "quit":
          this.quitSysterm();
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/var";

.dash-header {
  background: #fff;
  height: 60px;
  line-height: 60px;
  text-align: right;
  box-shadow: 0 1px 2px darken($line-color, 30%);

  h1 {
    float: left;
    height: 60px;
    width: 200px;
    text-align: center;
    font-size: 24px;
    font-weight: 500;

    a {
      color: $theme-color;
    }
  }
  .dash-header-right {
    float: right;
    height: 60px;
  }

  // 消息通知
  .notice-item {
    margin-top: 10px;
    margin-right: 40px;
  }
}
</style>